<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
  <header>
    <div class="header">
        <span class="title">ESP32 Monitor</span>
        <RouterLink to="/serial"><el-button type="primary">串口监视器</el-button></RouterLink>
        <RouterLink to="/chart"><el-button type="primary">数据图表</el-button></RouterLink>
        <RouterLink to="/about"><el-button type="primary">系统设置</el-button></RouterLink>
    </div>
  </header>

  <div class="content">
    <RouterView />
  </div>
</template>

<style scoped>
.header {
  display: flex;
  height: 64px;
  align-items: center;
  padding: 0 32px;

  a:nth-of-type(n+2) {
    margin-left: 20px;
  }

  .title {
    font-size: 20px;
    color: #111827;
    line-height: 28px;
    margin-right: 24px;
  }
}

.content {
  display: flex;
  width: 100%;
  height: calc(100vh - 64px);
  padding: 0 32px;
  background-color: #E5E7EB;
}
</style>
